<template>
  <div id="LyricView" ref="lyricView">
    <div
      id="lyricBg"
      :style="{
        backgroundImage: 'url(' + this.$store.state.musicInfo.imageUrl + ')',
        backgroundSize: '100%,100%',
      }"
    ></div>
    <div id="lyContent">
      <div id="lyContentTitle">
        <div><van-icon name="arrow-down" @click="packUp" /></div>
        <div>
          <span
            :class="{ active: isActive == index }"
            @click="alertActive(index)"
            v-for="(item, index) in titleItem"
            :key="index"
            >{{ item }}</span
          >
        </div>
        <div></div>
      </div>
      <div
        id="lyContentShow"
        @touchstart="startTouch"
        @touchmove="moveTouch"
        @touchend="endTouch"
      >
        <div>
          <div>
            <!-- 歌曲信息展示 -->
            <div>
              <div
                id="musicImg"
                :style="{
                  backgroundImage:
                    'url(' + this.$store.state.musicInfo.imageUrl + ')',
                  backgroundSize: '100%,100%',
                }"
              ></div>
              <div id="musicInfo">
                <div>
                  <div>{{ this.$store.state.musicInfo.musicName }}</div>
                  <div>{{ this.$store.state.musicInfo.artist }}</div>
                  <div>{{ currentLyric }}</div>
                </div>
                <div>
                  <span v-if="isLike" class="bobafont bobamusic-aixin"></span
                  ><span v-else class="bobafont bobamusic-aixin1"></span>
                </div>
              </div>
              <div id="musicController">
                <!-- 功能按钮的编写 -->
                <div>
                  <div>
                    <span
                      @click="ktv"
                      class="bobafont bobamusic-maikefeng"
                    ></span>
                  </div>
                  <div>
                    <span
                      @click="sound"
                      class="bobafont bobamusic-dianbo2"
                    ></span>
                  </div>
                  <div>
                    <span
                      @click="download"
                      class="bobafont bobamusic-xiazai"
                    ></span>
                  </div>
                  <div>
                    <span
                      @click="comment"
                      class="bobafont bobamusic-pinglun"
                    ></span>
                  </div>
                  <div>
                    <span
                      @click="gengduo"
                      class="bobafont bobamusic-gengduo"
                    ></span>
                  </div>
                </div>
                <!-- 进度条 -->
                <div>
                  <c-progress />
                </div>
                <div>
                  <!-- 控制条 -->
                  <div>
                    <span
                      class="bobafont bobamusic-suijibofang"
                      @click="playOrder"
                    ></span>
                  </div>
                  <div>
                    <span
                      class="bobafont bobamusic-icon-next-1"
                      @click="preMusic"
                    ></span>
                  </div>
                  <div>
                    <span
                      v-if="isPlay"
                      class="bobafont bobamusic-zanting"
                      @click="musicSwitch"
                    ></span>
                    <span
                      v-else
                      class="bobafont bobamusic-icon"
                      @click="musicSwitch"
                    ></span>
                  </div>
                  <div>
                    <span
                      class="bobafont bobamusic-icon-next-11"
                      @click="nextMusic"
                    ></span>
                  </div>
                  <div>
                    <span
                      class="bobafont bobamusic-gedan"
                      @click="showMusicList"
                    ></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 第2个页面 -->
          <div>
            <!-- // 歌词名以及作者 -->
            <ul @scroll.stop="lyricScroll" @touchend="lyricScroolEnd">
              <li></li>
              <li
                v-for="(item, index) in lyric"
                :key="index"
                :class="{ lriycActive: index + 1 == isLriycActiv }"
                @click.stop="lyricClick(item)"
              >
                {{ item.lrc }}
              </li>
              <li></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CProgress from "./CProgress.vue";
import lyric from "assets/js/lyric";
import request from "network/requests";
const cProgress = () => import("components/common/CProgress");
export default {
  components: { CProgress },
  data() {
    return {
      titleItem: ["歌曲", "歌词"],
      isActive: 0,
      startX: 0,
      diffX: 0,
      startY: 0,
      currentX: 0,
      isLike: false,
      percent: 0,
      currentProgress: 0,
      lyricHeight: 0,
      isDiction: false,
      isPlay: true,
    };
  },
  methods: {
    musicSwitch() {
      // 音乐开关
      console.log("音乐开关");
      this.isPlay = !this.isPlay;
      this.$store.commit("setmusicPlayState", this.isPlay);
    },
    playOrder() {
      // 播放顺序
      console.log("播放顺序");
    },
    preMusic() {
      // 上一首歌
      console.log("上一首歌");
      let index = 0;
      if (this.$store.state.musicList.length === 0) {
        this.$toast.success("列表暂时没有歌曲");
        return;
      }
      if (this.$store.state.currentMusicIndex === 0) {
        index = this.$store.state.musicList.length - 1;
      } else {
        index = this.$store.state.currentMusicIndex - 1;
      }
      this.$store.commit("setcurrentMusicIndex", index);
      this.$store.commit(
        "setCurrentMusicId",
        this.$store.state.musicList[index].id
      );
      this.$store.commit("setLoading", true);
    },
    nextMusic() {
      // 下一首歌
      console.log("下一首歌");
      let index = this.$store.state.currentMusicIndex;
      if (this.$store.state.musicList.length === 0) {
        this.$toast.success("列表暂时没有歌曲");
        return;
      }
      if (index == this.$store.state.musicList.length - 1) {
        index = 0;
      } else {
        index++;
      }
      this.$store.commit("setcurrentMusicIndex", index);
      this.$store.commit(
        "setCurrentMusicId",
        this.$store.state.musicList[index].id
      );
      this.$store.commit("setLoading", true);
    },
    flushInterface() {
      let musicImg = document.querySelector(
        "#lyContentShow > div div:first-child > #musicImg"
      );
      let bg = document.querySelector("#lyricBg");
      // console.log(this.$store.state.musicInfo);
      musicImg.style.background = `url(${this.$store.state.musicInfo.imageUrl}) 0% 0% / contain`;
      bg.style.background = `url(${this.$store.state.musicInfo.imageUrl})`;
      bg.style.backgroundSize = `100% 100%`;
      // 初始化歌词基本高度
      let lyricLi = document.querySelector(
        "#lyContent> #lyContentShow > div > div:last-child > ul>li:nth-child(8)"
      );
      this.lyricHeight = lyricLi.offsetHeight || "20";
      document.querySelector(
        "#lyContentShow > div > div:last-child > ul"
      ).scrollTop = this.currentScrollTop;
    },
    showMusicList() {
      // 播放列表
      console.log("播放列表");
    },
    alertActive(index) {
      this.isActive = index;
    },
    download() {
      // 下载按钮
      this.$toast("此功能暂不支持");
    },
    ktv() {
      // k歌
      this.$toast("第三方服务商还在对接中...");
    },
    sound() {
      this.$toast("暂不能切换音效");
    },
    comment() {
      this.$toast("赞无评论");
    },
    gengduo() {
      this.$toast("暂无更多");
    },
    startTouch(e) {
      this.startX = e.changedTouches[0].clientX;
      this.startY = e.changedTouches[0].clientY;
      this.currentX = e.changedTouches[0].clientX;
      //消除过渡时间，更加丝滑
      document.querySelector("#lyContentShow > div").style.transition =
        "all 0s ease";
    },
    moveTouch(e) {
      let diffX = e.changedTouches[0].clientX - this.startX;
      let diffY = e.changedTouches[0].clientY - this.startY;
      if (Math.abs(diffX) > Math.abs(diffY)) {
        this.diffX = diffX;
        if (diffX < 0 && this.isActive != 1) {
          document.querySelector("#lyContentShow > div").style.transform =
            "translateX(" + diffX + "px)";
        }
        if (diffX > 0 && this.isActive != 0) {
          document.querySelector("#lyContentShow > div").style.transform =
            "translateX(" + (-document.body.clientWidth + diffX) + "px)";
        }
      }
    },
    endTouch(e) {
      document.querySelector("#lyContentShow > div").style.transition =
        "all 0.5s ease";
      if (this.diffX < 100 && this.diffX > -100) {
        if (this.isActive == 1) {
          document.querySelector("#lyContentShow > div").style.transform =
            "translateX(" + -document.body.clientWidth + "px)";
        }
        if (this.isActive == 0) {
          document.querySelector("#lyContentShow > div").style.transform =
            "translateX(0px)";
        }
        return;
      }

      let diffX = this.startX - e.changedTouches[0].clientX;
      if (diffX > 100 && this.isActive == 0) {
        // 向左滑动
        document.querySelector("#lyContentShow > div").style.transform =
          "translateX(" + -document.body.clientWidth + "px)";
        this.isActive = 1;
      }
      if (diffX < -100 && this.isActive == 1) {
        // 向右滑动
        document.querySelector("#lyContentShow > div").style.transform =
          "translateX(0px)";
        this.isActive = 0;
      }
    },
    lyricScroll(e) {
      console.log("滚动中");
      console.log(e);
    },
    lyricClick(item) {
      this.$store.commit("setCurrentTime", item.time);
    },
    lyricScroolEnd() {
      console.log("选取歌词结束");
      let currentLyric = document.querySelector(".lriycActive");
      setTimeout(() => {
        this.isDiction = false;
        document.querySelector(
          "#lyContentShow > div > div:last-child > ul"
        ).scrollTop = this.currentScrollTop;
        console.log(this.currentScrollTop);
      }, 5000);
    },
    packUp() {
      // 收起此页面
      this.$router.go(-1);
    },
  },
  computed: {
    serveApi() {
      return (
        "http://" +
        this.$store.state.currentServe.ip +
        ":" +
        this.$store.state.currentServe.port
      );
    },
    lyric() {
      let lyricArr = [];
      console.log(this.$store.state.musicInfo);
      let hasLyr;
      if (!this.$store.state.musicInfo.lyric.hasOwnProperty("lrc")) {
        hasLyr = lyric.lrc.lyric;
        console.log("fsldjflksdjflsdkjf");
      } else {
        hasLyr = this.$store.state.musicInfo.lyric.lrc.lyric;
      }
      console.log(hasLyr);
      hasLyr.split(/[\n]/).forEach((element) => {
        if (!element) {
          return;
        }
        let obj = {};
        let disposeLyric = element.match(/(\[.*?\])(.*)/);
        let timeArr = disposeLyric[1]
          .substring(1, disposeLyric[1].length - 1)
          .split(":");
        obj.time = parseFloat(timeArr[0]) * 60 + parseFloat(timeArr[1]);
        obj.lrc = disposeLyric[2];
        console.log(obj);
        lyricArr.push(obj);
      });
      return lyricArr;
    },
    MusicUpTimeInfo() {
      return this.$store.state.updateTimeEvent;
    },
    isLriycActiv() {
      if (this.lyric.length == 0) {
        return;
      }
      for (let index = 0; index < this.lyric.length; index++) {
        if (this.lyric[index].time > this.MusicUpTimeInfo.path[0].currentTime) {
          return index;
        }
      }
    },
    currentScrollTop() {
      return this.lyricHeight * this.isLriycActiv;
    },
    currentLyric() {
      if (this.lyric[this.isLriycActiv - 1] == undefined) {
        return "网抑云欢迎你";
      }
      return this.lyric[this.isLriycActiv - 1].lrc;
    },
  },
  mounted() {
    // 获取歌词
    //初始化歌曲信息
    let musicImg = document.querySelector(
      "#lyContentShow > div div:first-child > #musicImg"
    );
    let bg = document.querySelector("#lyricBg");
    // console.log(this.$store.state.musicInfo);
    musicImg.style.background = `url(${this.$store.state.musicInfo.imageUrl}) 0% 0% / contain`;
    bg.style.background = `url(${this.$store.state.musicInfo.imageUrl})`;
    bg.style.backgroundSize = `100% 100%`;

    // 初始化歌词基本高度
    let lyricLi = document.querySelector(
      "#lyContent> #lyContentShow > div > div:last-child > ul>li:nth-child(8)"
    );
    this.lyricHeight = lyricLi.offsetHeight;
    document.querySelector(
      "#lyContentShow > div > div:last-child > ul"
    ).scrollTop = this.currentScrollTop;
  },
  component: {
    cProgress,
  },
  watch: {
    isActive(newV, oldV) {
      if (newV != oldV) {
        if (newV == 0) {
          document.querySelector("#lyContentShow > div").style.transition =
            "all 0.5s ease";
          document.querySelector("#lyContentShow > div").style.transform =
            "translateX(0px)";
        }
        if (newV == 1) {
          document.querySelector("#lyContentShow > div").style.transition =
            "all 0.5s ease";
          document.querySelector("#lyContentShow > div").style.transform =
            "translateX(" + -document.body.clientWidth + "px)";
        }
      }
    },
    MusicUpTimeInfo(newV, oldV) {
      // 监听播放的事件
    },
    isLriycActiv() {
      // 滚动歌词
      console.log("歌词要滚动了");
      console.log("当前状态" + this.isDiction);
      if (!this.isDiction) {
        document.querySelector(
          "#lyContentShow > div > div:last-child > ul"
        ).scrollTop = this.currentScrollTop;
        console.log("滚动大小" + this.currentScrollTop);
      }
    },
  },
};
</script>

<style scoped>
#LyricView {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-color: aliceblue;
  z-index: 9;
  overflow: hidden;
}
#lyricBg {
  transform: scale(1.2);
  background: url("https://p1.music.126.net/34YW1QtKxJ_3YnX9ZzKhzw==/2946691234868155.jpg");
  background-size: 100% 100%;
  filter: blur(100px);
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
}
#lyContent {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
}
#lyContent > #lyContentTitle {
  display: flex;
  height: 49px;
  line-height: 49px;
}
#lyContentTitle div:first-child {
  flex: 1;
  font-size: 25px;
  color: aliceblue;
}
#lyContentTitle div:first-child i {
  margin-left: 20px;
}
#lyContentTitle div:nth-child(2) {
  text-align: center;
  flex: 1;
  color: gainsboro;
}
#lyContentTitle div:nth-child(2) > span {
  padding: 0 10px;
}
#lyContentTitle div:last-child {
  flex: 1;
}
/* 激活样式 */
.active {
  color: #ffffff;
}

/* 内容区域 */

#lyContentShow {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

#lyContentShow > div {
  height: 100%;
  width: 200%;
  display: flex;
  /* transition: all 0.5s ease; */
}
#lyContentShow > div div:first-child {
  /* background-color: #fff; */
  height: 100%;
  flex: 1;
  position: relative;
}
#lyContentShow > div div:last-child {
  /* background-color: black; */
  height: 100%;
  flex: 1;
}

/* 歌曲展示页面 */
#lyContentShow > div div:first-child > #musicImg {
  width: 80%;
  height: 0;
  padding-bottom: 80%;
  background-color: #ccc;
  background: url("https://p1.music.126.net/34YW1QtKxJ_3YnX9ZzKhzw==/2946691234868155.jpg");
  background-size: contain;
  margin: 20px auto;
  border-radius: 20px;
  border: 1px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

#lyContentShow > div div:first-child > #musicInfo {
  width: 80%;
  height: 100px;
  margin: 40px auto 20px auto;
  display: flex;
}
#lyContentShow > div div:first-child > #musicInfo div:first-child {
  flex: 1;
  height: 100%;
  color: #ccc;
}
#lyContentShow > div div:first-child > #musicInfo div:first-child > div {
  height: 33%;
}
#lyContentShow
  > div
  div:first-child
  > #musicInfo
  div:first-child
  > div:first-child {
  color: #fff;
  font-size: 20px;
  font-weight: bold;
}
#lyContentShow > div div:first-child > #musicInfo > div:last-child {
  flex: 1;
  height: 100%;
  text-align: right;
}

#lyContentShow > div div:first-child > #musicInfo > div:last-child > span {
  font-size: 40px;
  color: red;
}
/* 控制器 */
#lyContentShow > div div:first-child > #musicController {
  height: 20%;
  width: 90%;
  position: absolute;

  left: 5%;
  bottom: 20px;
  display: flex;
  flex-direction: column;
}

#lyContentShow > div div:first-child > #musicController > div:first-child {
  flex: 1;
  display: flex;
  color: #fff;
}
#lyContentShow
  > div
  div:first-child
  > #musicController
  > div:first-child
  > div {
  flex: 1;
}

#lyContentShow
  > div
  div:first-child
  > #musicController
  > div:first-child
  > div
  > span {
  font-size: 25px;
}

#lyContentShow
  > div
  div:first-child
  > #musicController
  > div:first-child
  > div {
  text-align: center;
}

/* 进度条 */
#lyContentShow > div div:first-child > #musicController > div:nth-child(2) {
  flex: 1;
  position: relative;
}
#lyContentShow
  > div
  div:first-child
  > #musicController
  > div:nth-child(2)
  > #CProgress {
  width: 100%;
  height: 100%;
}

#lyContentShow > div div:first-child > #musicController > div:last-child {
  flex: 2;
  display: flex;
}
#lyContentShow > div div:first-child > #musicController > div:last-child > div {
  flex: 1;
  position: relative;
}
#lyContentShow
  > div
  div:first-child
  > #musicController
  > div:last-child
  > div
  > span {
  color: #fff;
  font-size: 25px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#lyContentShow
  > div
  div:first-child
  > #musicController
  > div:last-child
  > div:first-child
  span {
  font-size: 20px;
}
#lyContentShow
  > div
  div:first-child
  > #musicController
  > div:last-child
  > div:nth-child(3)
  span {
  font-size: 35px;
}
#lyContentShow
  > div
  div:first-child
  > #musicController
  > div:last-child
  > div:last-child
  span {
  font-size: 20px;
}

/* 歌词展示页面 */
#lyContentShow > div > div:last-child {
}

#lyContentShow > div > div:last-child > ul {
  width: 90%;
  height: 100%;
  overflow: auto;
  list-style: none;
  font-size: 16px;
  color: #fff;
  padding-left: 20px;
}
/* 去掉滚动条 */
#lyContentShow > div > div:last-child > ul::-webkit-scrollbar {
  display: none;
}
#lyContentShow > div > div:last-child > ul > li {
  padding: 20px 0;
}
#lyContentShow > div > div:last-child > ul > li:first-child {
  height: 30%;
  padding: 0;
}

#lyContentShow > div > div:last-child > ul > li:last-child {
  height: 30%;
  padding: 0;
}

#lyContent > #lyContentShow > div > div:last-child > ul .lriycActive {
  font-size: 25px;
  font-weight: bold;
}
</style>